<html>
    <!--
    Warm Start: Motion

    This benchmarks warm start - when an animation library already
    knows the initial animating values.

    Run in private browsing mode to avoid browser plugins interfering with
    benchmark.
  -->
    <head>
        <style>
            body {
                padding: 0;
                margin: 0;
            }

            .container {
                padding: 100px;
                width: 100%;
                display: flex;
                flex-wrap: wrap;
            }

            .container > div {
                width: 100px;
                height: 100px;
            }

            .box {
                width: 10%;
                height: 100px;
                background-color: #fff;
            }
        </style>
    </head>
    <body>
        <div class="container"></div>

        <script type="module" src="/src/imports/framer-motion-dom.js"></script>
        <script type="module">
            // Create boxes
            const numBoxes = 100
            let html = ``
            for (let i = 0; i < numBoxes; i++) {
                html += `<div><div class="box"></div></div>`
            }
            document.querySelector(".container").innerHTML = html

            const { animate } = Motion
            const boxes = document.querySelectorAll(".box")

            setTimeout(() => {
                // Warm start
                boxes.forEach((box) =>
                    animate(
                        box,
                        {
                            rotate: [0, Math.random() * 360],
                            backgroundColor: ["#fff", "#f00"],
                            width: ["0%", Math.random() * 100 + "%"],
                            x: [0, 5],
                        },
                        {
                            easing: "linear",
                            duration: 1,
                        }
                    )
                )
            }, 1000)
        </script>
    </body>
</html>
